<template>
  <div>
    <daiying-hot :hotlist="hotlist"></daiying-hot>
    <div class="kong"></div>
    <daiying-praise :praiselist="praiselist"></daiying-praise>
  </div>
</template>

<script>
import DaiyingHot from "./components/DaiyingHot.vue";
import DaiyingPraise from "./components/DaiyingPraise.vue";
import axios from "axios";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Daiying",
  components: {
    DaiyingHot,
    DaiyingPraise,
  },
  data() {
    return {
      hotlist: [],
      praiselist: [],
    };
  },
  mounted() {
    axios.get("./json/daiying.json").then((res) => {
      console.log(res);
      this.hotlist = res.data.coming;
      this.hotlist.forEach((item) => {
        console.log(item);
        item.img = item.img.replace("w.h", "69.90");
      });
    });
    axios.get("./json/daiying2.json").then((res) => {
      console.log(res);
      let praiselist = res.data.coming;
      let daiying = {};
      praiselist.forEach((item) => {
        item.img = item.img.replace("w.h", "69.90");
        if (daiying[item.comingTitle]) {
          daiying[item.comingTitle].push(item);
        } else {
          daiying[item.comingTitle] = [];
          daiying[item.comingTitle].push(item);
        }
      });
      this.praiselist = daiying;
    });
  },
};
</script>

<style lang="less" scoped>
.kong {
  width: 100%;
  height: 10px;
  background: #eee;
  margin-bottom: 10px;
}
</style>